<template>
  <div class="cart-list-item">

    <div class="check-content">
      <check-button class="check-button" @click.native="checkClick" :isChecked="product.checked" ref="checkButtonRef"/>
    </div>

    <div class="item-img">
      <img :src="product.img">
    </div>
    <div class="item-info">
      <p class="item-title">{{product.title}}</p>
      <p class="item-desc">{{product.desc}}</p>
      <span class="item-price">￥{{product.price}}</span>
      <span class="item-count">{{product.count}}</span>
    </div>
  </div>
</template>

<script>
  import CheckButton from "components/contents/checkButton/CheckButton";
  export default {
    name: "CartListItem",
    components:{
      CheckButton,
    },
    methods:{
      checkClick(){
        this.product.checked=!this.product.checked;
      },


    },
    props:{
      product:{
        type:Object,
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .cart-list-item {
    width: 100%;
    height: 5.5rem;
    border-bottom: 0.04rem solid rgba(128, 128, 128, 0.4);
    display: flex;
    padding: 0.4rem;
    padding-left: 0rem;
  }
  .item-img {
    width: 3.5rem;
    height: 100%;
  }
  .item-img img {
    width: 100%;
    height: 100%;
    border-radius: 0.4rem;
  }
  .item-info {
    position: relative;
    width: calc(100% - 3.5rem - 1.2rem - 0.4rem);
    margin-left: 0.4rem;
  }
  .item-info p {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .item-title {
    font-size: 0.75rem;
    padding-bottom: 0.5rem;
  }
  .item-desc {
    font-size: 0.6rem;
    color: gray;
  }
  .item-price {
    position: absolute;
    left: 0;
    bottom: 0.4rem;
    font-size: 0.75rem;
    color: orangered;
  }
  .item-count {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    font-size: 0.75rem;
  }
  .check-content{
    display: flex;
    align-items: center;
  }
</style>
